<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<!-- 设置360浏览器渲染引擎 -->
		<meta name="renderer" content="webkit">
		<link rel="icon" type="image/png" href="/order/img/favicon.png">
		<link rel="stylesheet" type="text/css" href="/order/amazeui/css/amazeui.css" />
		<script type="text/javascript" charset="utf-8" src="/order/js/jquery.js"></script>
		<script type="text/javascript" charset="utf-8" src="/order/amazeui/js/amazeui.js"></script>
		<!-- 全局CSS -->
        <link rel="stylesheet" href="/order/css/base.css">
		<!-- 当前页面 css -->
        <link rel="stylesheet" type="text/css" href="/order/css/shoppingCar.css"/>
		<!-- 当前页面功能 js -->
		<script src="/order/js/pages/shoppingCar.js"></script>
        <!--使用art template模板-->
        <script src="/order/js/template-web.js"></script>
        <script>
            // window.addEventListener("storage", function (e) {
            //     console.log(e)
            //     console.log(e.newValue)
            //     alert('来自其他页面的localstorage');
            // });
            $(function () {
                // var res ="[";
                var allStorage = localStorage.valueOf();
                console.log("1111111111");
                var res = JSON.stringify(allStorage);
                console.log(res);
                console.log(localStorage.getItem("hello"));
                $.ajax({
                    url: "/order/order/getCar",
                    datatype: 'json',
                    method: 'get',
                    // 直接传allStorage会报错！
                    data: {"car": res},
                    success: function (result) {
                        var html=template("testdiv",{"list":result.data});
                        // console.log(html);
                        let total = $(".total:first");
                        total.after(html);
                        // 清空localstorage
                        // localStorage.clear();
                        // 进入页面时，将购物车中的书的id和数量放入localStorage中，方便下次直接在localStorage中修改！
                        // for (let d of result.data){
                        //     localStorage.setItem(d.id, d.numberInCar);
                        //     console.log("1111111");
                        //     console.log(localStorage.getItem(d.id));
                        // }
                    }
                });

                // 刚开始自己通过js代码拼接页面比较麻烦!!!
                // function findAll(book){
                //     console.log("hello---------------------")
                //     // let div = $("#stepOne");
                //     let total = $(".total:first");
                //     let ul = $('<ul class="am-g list"></ul>');
                //     let li1 = $('<li  class="am-u-sm-2">' +
                //         '<span><input type="checkbox"></span>' +
                //         '<span class="img"><img src='+'http://192.168.4.8:8080/'+book.imgurl+'></span>' +
                //         '</li>');
                //     let li2 = $('<li  class="am-u-sm-2">'+book.bookname+'</li>');
                //     let li3 = $(' <li  class="am-u-sm-2 price">'+book.price+'</li>');
                //     let li4 = $('<li  class="am-u-sm-2 price">'+book.price+'</li>');
                //     // 明天在测试一下为什么不行？界面乱了
                //     let li5 = $('<li  class="am-u-sm-2 num">' +
                //         // '<span onclick="minus('+book.id+')">-</span>' +
                //         '<input style="width: 30px;" type="number" id="num"'+book.id+'></input>' +
                //         // '<span onclick="plus('+book.id+')">+</span>' +
                //         '</li>');
                //     // let li5 = $('<li  class="am-u-sm-2 num">' +
                //     //     '<span>-</span>' +
                //     //     '<span>1</span>' +
                //     //     '<span>+</span>' +
                //     //     '</li>');
                //     let li6 = $('<li  class="am-u-sm-2 price">'+book.price +'</li>');
                //     let li7 = $('<li  class="am-u-sm-1 am-u-end">删除</li>');
                //     ul.append(li1);ul.append(li2);ul.append(li3);ul.append(li4);ul.append(li5);ul.append(li6);ul.append(li7);
                //     // div.append(ul);
                //     total.after(ul);
                // }
            })

            function plus(id) {
                var numi = "num"+id;
                var singlePrice = "singlePrice"+id;
                var totalPrice = "totalPrice"+id;
                var num = parseInt($("#"+numi).val());
                $("#"+numi).val(num+1);
                var sprice = $("#"+singlePrice).html();
                $("#"+totalPrice).html(parseFloat(num+1)*parseFloat(sprice));
                // 修改LocalStorage中的值，

                // 设置localstorage+1
                // localStorage.setItem(id,parseInt(localStorage.getItem(id))+1);
                localStorage.setItem(id,num+1);
                console.log(localStorage.getItem(id));
                // 更新小计，
                selectBook(id);

            }
            function minus(id) {
                var numi = "num"+id;
                var singlePrice = "singlePrice"+id;
                var totalPrice = "totalPrice"+id;
                var num = parseInt($("#"+numi).val());
                $("#"+numi).val(num-1);
                var sprice = $("#"+singlePrice).html();
                // console.log(sprice);
                // console.log(num);
                // console.log(singlePrice);
                // console.log(totalPrice);
                $("#"+totalPrice).html(parseFloat(num-1)*parseFloat(sprice));
                // 修改LocalStorage中的值，
                // localStorage.setItem(id,parseInt(localStorage.getItem(id))-1);
                localStorage.setItem(id,num-1);
                console.log(localStorage.getItem(id));
                // 更新小计，
                selectBook(id);
            }
            //立即结算
            function closeCal(){
                // var allStore = localStorage.valueOf();
                // 选择勾选的。
                var map = {};
                $("input[name='books']:checked").each(function (i) {//把所有被选中的复选框的值存入数组
                    var id = $(this).attr("id");
                    var numi = "num"+id;
                    var num = $("#"+numi).val();
                    // map[id] = num;
                    map[id] = localStorage.getItem(id);
                });

                var result = JSON.stringify(map);
                console.log("选中的文件为:");
                console.log(result);
                // 发送合适购物车！
                $.ajax({
                    url: "/order/order/checkCar",
                    datatype: 'json',
                    method: 'get',
                    data: {"car": result},
                    success: function (result) {
                        var html=template("checkOrderTemplate",{"list":result.data});
                        // console.log(html);
                        let total = $("#stepTwo>.total");
                        total.after(html);
                        // 进入页面时，将购物车中的书的id和数量放入localStorage中，方便下次直接在localStorage中修改！
                        for (let d of result.data){
                            localStorage.setItem(d.id, d.numberInCar);
                            console.log("1111111");
                            console.log(localStorage.getItem(d.id));
                        }
                        // localStorage.clear();
                        //更新订单页面小计： sumInOrder
                        updateSumInOrder();
                    }
                });
                // 获取当前用户的所有收获地址！
                $.ajax({
                    url: "/order/order/getAddress",
                    datatype: 'json',
                    method: 'get',
                    success: function (result) {
                        console.log("成功获取地址?");
                        var html=template("addressTemplate",{"list":result.data});
                        console.log(html);
                        let total = $("#stepTwo>.address-list");
                        total.append(html);
                    }
                })
            }
            
            function updateSumInOrder() {
                let nodes = $(".subtotal");
                let sum = 0;
                for( node of nodes){
                    sum +=parseInt($(node).html());
                }
                console.log("--------------")
                console.log(sum);
                $("#sumInOrder").html(sum);
            }
            // 在结算页面删除书籍
            function removeBook(id) {
                var ulid = "ul"+id;
                window.localStorage.removeItem(id);
                // console.log("以删除,应该为空："+localStorage.getItem(id));
                let total = $(".total:first");
                // 删除对应的节点
                // console.log($("#"+ulid));
                $("#"+ulid).remove();
                // 发送ajax从后台删除
                $.ajax({
                    url: '/order/order/deleteBookInCar',
                    data: {id:id},
                    type:"get",
                    dataType:'json',
                    success: function (res) {
                        if(res.code ==200){
                            alert("删除成功!");
                            // 更新小计，
                            selectBook();
                        }
                    }
                })
            }

            // 在核实订单页面删除书籍！
            function removeOrderBook(id) {
                var ulid = "ul2"+id;
                window.localStorage.removeItem(id);
                // console.log("以删除,应该为空："+localStorage.getItem(id));
                let total = $(".total:first");
                // 删除对应的节点
                // console.log($("#"+ulid));
                $("#"+ulid).remove();
                // 发送ajax从后台删除
                $.ajax({
                    url: '/order/order/deleteBookInCar',
                    data: {id:id},
                    type:"get",
                    dataType:'json',
                    success: function (res) {
                        if(res.code ==200){
                            alert("删除成功!");
                        }
                    }
                })
                //更新订单页面小计： sumInOrder
                updateSumInOrder();
            }

            // 勾选书籍的时候，更新小计
            function selectBook(id) {
                var sum = 0;
                var num =0;
                $("input[name='books']:checked").each(function (i) {//把所有被选中的复选框的值存入数组
                    var id = $(this).attr("id");
                    var numi = "num"+id;
                    var singlePrice = "singlePrice"+id;
                    var num = parseInt($("#"+numi).val());
                    var sprice = $("#"+singlePrice).html();
                    sum += parseFloat(num)*parseFloat(sprice);
                    num +=1;
                });
                $("#sum").html(sum);
                $("#num").html(num);
            }

            // 插入一条订单!
            function submitOrder() {
                // 地址id
                // 书籍ids
                // 用户的username已经有了！
                var addressId = $("input[name='address']:checked").val();
                console.log(addressId);

                if(!addressId || typeof(addressId)=="undefined" || addressId==0){
                    alert("请选择地址！");
                    // 还是跳转了页面？
                    return;
                }
                var map ={};
                // var bookIds = [];
                let nodes = $(".checkOrderTemplate"); // 取到的是dom对象！
                for (let node of nodes){
                    // bookIds.push($(node).attr("bookId"));
                    let id = $(node).attr("bookId");
                    let num = $(node).attr("bookNum")
                    console.log("===========");
                    console.log(id);
                    console.log(num);
                    map[id] = num;
                }
                var result = JSON.stringify(map);
                // console.log(bookIds);
                if (! map || map.length ==0){
                    alert("请先去购买书籍!");
                    return;
                }
                //
                $.ajax({
                    url:"/order/order/submitOrder",
                    method: 'get',
                    data:{
                        addressId,
                        "car":result
                    },
                    datatype: 'json',
                    success: function (res) {
                        if (res.code == 500){
                            alert("提交订单失败！");
                        }
                        var html=$(".checkOrderTemplate");
                        // console.log(html);
                        let total = $("#stepThree>.total");
                        total.after(html);
                        // 复制地址
                        $("#usernameInPay").html($("#usernameInOrder").html() );
                        $("#ordernoInPay").html(res.data);
                        $("#phoneInPay").html($("#phoneInOrder").html());
                        $("#addressInPay").html( $("#addressInOrder").html());
                        // 复制总价！
                        $("#totalPrice").html($("#sumInOrder").html());
                    }
                })
                // 先判断余量是否足够？
                // 进入插入:
                // 插入 t_order,返回主键
                // 插入 t_order_book
            }

            //
            function pay() {
                // 正确的逻辑：发送请求到后台，获取图片，支付成功后，跳转到本地的方法，处理业务逻辑，业务逻辑处理完后，通过websocket向前端推送消息，跳转页面！
                // 这边直接线处理业务逻辑
                let no = $("#ordernoInPay").html();
                console.log(no);
                $.ajax({
                    url: '/order/order/paySuccessed',
                    data:{
                        no: no
                    },
                    datatype:'json',
                    type: 'get',
                    success: function (res) {
                        if (res.code == 500){
                            alert("支付失败！")
                        }
                        alert("支付成功1!")
                    }

                })
                // 0. 只需要订单号
                // 1. 修改t_order状态
                // 2. 修改book数量
                // 3. 增加t_book_supplier数量
                // 4.

            }

            // 窗口离开事件：
            // window.onbeforeunload=function(e){
            //     var all = localStorage.valueOf();
            //     console.log(all);
            //    $.ajax({
            //         url: "/order/order/modifyCar",
            //         data:{car: car},
            //         dataType: 'json',
            //         success: function (res) {
            //             if (res.code ==200){
            //                 var e = window.event||e;
            //                 e.returnValue=("确定离开当前页面吗？");
            //             }
            //         }
            //     })
            // }

            // function calculate(id){
            //     var numi = "num"+id;
            //     var pricei = "price"+id;
            //     var num = $("#"+numi).val();
            //     // console.log($("#"+numi));
            //     // console.log($("#numi"));
            //     var price = $("#p"+id).html();
            //     console.log(numi);
            //     console.log(pricei);
            //     console.log(num);
            //     console.log(price);
            //     $("#"+pricei).html(parseFloat(num)*parseFloat(price));
            // }
        </script>
	</head>
	<body>
		<!-- nav-start -->
		<header class="am-topbar">
			<div class="am-container base-nav-font">
				<div class="am-fl base-nav-title">
					<em>欢迎光临网博图书网</em>
					<a href="#">请登录</a>
					<a href="#">免费注册</a>
				</div>
				<ol class="am-fr base-nav-list">
					<li>
						<a href="#">购物车</a>
					</li>
					<li><a href="/order/orderManager">我的订单</a></li>
					<li>
						<div class="base-menu-list">
							<a>个人账户 <span class="am-icon-caret-down"></span></a>
							<div class="base-menu-list-content">
								<ul >
									<li><a href="#">个人信息</a></li>
									<li><a href="#">收货地址</a></li>									
								</ul>
							</div>
						</div>
					</li>
				</ol>
			</div>
		</header>
        <!-- nav-end -->
        <!-- toptitle-start -->
        <div class="base-nav">
            <ul class="am-g am-g-fixed">
                <li class="am-u-sm-6">
                    <img class="nav-img" src="./img/logo.png">
                </li>
                <li class="am-u-sm-2">
                    <div>√</div>
                    <span>正版好图书</span>
                </li>
                <li class="am-u-sm-2">
                    <div>邮</div>	
                    <span>全场满69包邮</span>
                </li>
                <li class="am-u-sm-2">
                    <div>折</div>
                    <span>特价书一折起</span>
                </li>
            </ul>
        </div>
        <!-- toptitle-end -->
        <!-- shoppingcontent-start  -->
        <div  class="am-g am-g-fixed content">
            <!-- shoppingprocess-start -->
            <ul class="am-g process" id="executionSteps">
                <!-- 
                    需要自行完成 回退功能
                -->
                <li class="am-u-sm-2" name="stepOne">我的购物车</li>
                <li class="am-u-sm-2" name="stepTwo">填写核对订单</li>
                <li class="am-u-sm-2" name="stepThree">成功提交订单</li>
            </ul>
            <!-- shoppingprocess-start -->   

            <!-- step-one-start -->
            <div id="stepOne">
                <!-- shoppingtitle-start -->
                <ul class="am-g title">
                    <li class="am-u-sm-2">购物车(3)</li>
                </ul>
                <!-- shoppingtitle-end -->  
                
                <!-- shoppinglist-start -->
                <ul class="am-g total">
                    <li  class="am-u-sm-2">
                        <span><input type="checkbox"></span>全选
                    </li>
                    <li  class="am-u-sm-2">图书名称</li>
                    <li  class="am-u-sm-2">定价（元）</li>
                    <li  class="am-u-sm-2">平台售价（元）</li>
                    <li  class="am-u-sm-2">数量</li>
                    <li  class="am-u-sm-2">小计（元）</li>
                    <li  class="am-u-sm-1">操作</li>
                </ul>


                <ul class="am-g list">
                    <li  class="am-u-sm-2">
                        <span><input type="checkbox"></span>
                        <span class="img"><img src="./img/newbook/newbook01.jpg"></span>
                    </li>
                    <li  class="am-u-sm-2">阿里阿德涅的子弹</li>
                    <li  class="am-u-sm-2 price">￥29.8</li>
                    <li  class="am-u-sm-2 price">￥8.9</li>
                    <li  class="am-u-sm-2 num">
                        <span>-</span>
                        <span>1</span>
                        <span>+</span>
                    </li>
                    <li  class="am-u-sm-2 price">￥8.9</li>
                    <li  class="am-u-sm-1 am-u-end">删除</li>
                </ul>
    
                <!--<ul class="am-g list">-->
                    <!--<li  class="am-u-sm-2">-->
                        <!--<span><input type="checkbox"></span>-->
                        <!--<span class="img"><img src="./img/newbook/newbook01.jpg"></span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2">所有人问所有人</li>-->
                    <!--<li  class="am-u-sm-2 price">￥38</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-2 num">-->
                        <!--<span>-</span>-->
                        <!--<span>1</span>-->
                        <!--<span>+</span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-1 am-u-end">删除</li>-->
                <!--</ul>-->

                <!--<ul class="am-g list">-->
                    <!--<li  class="am-u-sm-2">-->
                        <!--<span><input type="checkbox"></span>-->
                        <!--<span class="img"><img src="./img/newbook/newbook01.jpg"></span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2">舞姬</li>-->
                    <!--<li  class="am-u-sm-2 price">￥25</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-2 num">-->
                        <!--<span>-</span>-->
                        <!--<span>1</span>-->
                        <!--<span>+</span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-1 am-u-end">删除</li>-->
                <!--</ul>-->

                <ul class="am-g end car-end">
                    <li  class="am-u-sm-1">
                        <span><input type="checkbox"></span>
                        <span class="img">全选</span>
                    </li>
                    <li  class="am-u-sm-2">删除选中的商品</li>
                    <li  class="am-u-sm-3 price am-u-sm-offset-4">
                        <p>已选择 <span class="num" id="num">0</span> 件商品，商品总金额<span class="price" id="sum">￥0</span></p>
                        <!--<p>已优惠：<span>￥0</span></p>-->
                    </li>
                    <li  class="am-u-sm-2 am-u-end">
                        <!-- 禁用状态 -->
                        <!-- <div class="acount">立即结算</div> -->
                        <!-- 启用状态 -->
                        <button type="button" class="acount car-active" onclick="closeCal()" >立即结算</button>

                    </li>
                </ul>
                <!-- shoppinglist-end -->  
            </div>
            <!-- step-one-end -->

            <!-- step-two-start -->
            <div id="stepTwo">
                <ul class="am-g title">
                    <li class="am-u-sm-2">确认收货地址</li>
                </ul>
                <ul class="am-g address-list">
                    <li>
                        <button class="am-btn am-btn-danger am-btn-xs">添加新地址</button>
                    </li>
                    <li>
                        <input type="radio" name="address">
                        <span class="address">[假数据：]江苏省南京市秦淮区龙蟠中路458号通济产业园北区 3栋1-2层</span>
                        <span class="name">(漩涡鸣人 收)</span>
                        <span class="phone">18913000000</span>
                    </li>
                    <!--<li class="active">-->
                        <!--<input type="radio" name="address" checked>-->
                        <!--<span class="address">江苏省南京市秦淮区龙蟠中路458号通济产业园北区 3栋1-2层</span> -->
                        <!--<span class="name">(漩涡鸣人 收)</span>-->
                        <!--<span class="phone">18913000000</span>-->
                        <!--<span class="state">默认地址</span>-->
                    <!--</li>-->

                </ul>

                <!-- shoppingtitle-start -->
                <ul class="am-g title">
                    <li class="am-u-sm-2">确认订单信息</li>
                </ul>
                <!-- shoppingtitle-end -->  
                
                <!-- shoppinglist-start -->
                <ul class="am-g total">
                    <li  class="am-u-sm-2"></li>
                    <li  class="am-u-sm-2">图书名称</li>
                    <li  class="am-u-sm-2">定价（元）</li>
                    <li  class="am-u-sm-2">平台售价（元）</li>
                    <li  class="am-u-sm-2">数量</li>
                    <li  class="am-u-sm-2">小计（元）</li>
                    <li  class="am-u-sm-1">操作</li>
                </ul>
    
                <ul class="am-g list">
                    <li  class="am-u-sm-2">
                        <span class="img"><img src="./img/newbook/newbook01.jpg"></span>
                    </li>
                    <li  class="am-u-sm-2">阿里阿德涅的子弹</li>
                    <li  class="am-u-sm-2 price">￥29.8</li>
                    <li  class="am-u-sm-2 price">￥8.9</li>
                    <li  class="am-u-sm-2 num">1</li>
                    <li  class="am-u-sm-2 price">￥8.9</li>
                    <li  class="am-u-sm-1 am-u-end">删除</li>
                </ul>
    
                <!--<ul class="am-g list">-->
                    <!--<li  class="am-u-sm-2">-->
                        <!--<span class="img"><img src="./img/newbook/newbook01.jpg"></span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2">所有人问所有人</li>-->
                    <!--<li  class="am-u-sm-2 price">￥38</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-2 num">1</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-1 am-u-end">删除</li>-->
                <!--</ul>-->

                <!--<ul class="am-g list">-->
                    <!--<li  class="am-u-sm-2">-->
                        <!--<span class="img"><img src="./img/newbook/newbook01.jpg"></span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2">舞姬</li>-->
                    <!--<li  class="am-u-sm-2 price">￥25</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-2 num">1</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-1 am-u-end">删除</li>-->
                <!--</ul>-->

                <ul class="am-g end car-end">
                    <li  class="am-u-sm-3 price am-u-sm-offset-7">
                        <p>合计<span class="price" id="sumInOrder">￥24.9</span></p>
                        <p>已优惠：<span>￥57.9</span></p>
                    </li>
                    <li  class="am-u-sm-2 am-u-end">
                        <!-- 禁用状态 -->
                        <!-- <div class="acount">提交订单</div> -->
                        <!-- 启用状态 -->
                        <div class="acount car-active" id="submitOrder" onclick="submitOrder()">提交订单</div>

                    </li>
                </ul>
                <!-- shoppinglist-end -->  
            </div>
            <!-- step-two-end -->

            
            <!-- step-three-start -->
            <div id="stepThree">
                <ul class="am-g user-info">
                    <li class="am-u-sm-12">
                        <span class="tip">订单编号</span>
                        :
                        <span id="ordernoInPay">XDCEK99345655234254354</span>
                    </li>
                    <li class="am-u-sm-12">
                        <span class="tip">收货人</span>
                        :
                        <span id="usernameInPay">漩涡鸣人</span>
                    </li>
                    <li class="am-u-sm-12">
                        <span class="tip">联系电话</span>
                        :
                        <span id="phoneInPay">18913000000</span>
                    </li>
                    <li class="am-u-sm-12">
                        <span class="tip">收货地址</span>
                        :
                        <span id="addressInPay">江苏省南京市秦淮区龙蟠中路458号通济产业园北区 3栋1-2层</span>
                    </li>
                    
                </ul>
                
                <!-- shoppinglist-start -->
                <ul class="am-g total">
                    <li  class="am-u-sm-2"></li>
                    <li  class="am-u-sm-2">图书名称</li>
                    <li  class="am-u-sm-2">定价（元）</li>
                    <li  class="am-u-sm-2">平台售价（元）</li>
                    <li  class="am-u-sm-2">数量</li>
                    <li  class="am-u-sm-2">小计（元）</li>
                    <li  class="am-u-sm-1">操作</li>
                </ul>
    
                <ul class="am-g list">
                    <li  class="am-u-sm-2">
                        <span class="img"><img src="./img/newbook/newbook01.jpg"></span>
                    </li>
                    <li  class="am-u-sm-2">阿里阿德涅的子弹</li>
                    <li  class="am-u-sm-2 price">￥29.8</li>
                    <li  class="am-u-sm-2 price">￥8.9</li>
                    <li  class="am-u-sm-2 num">1</li>
                    <li  class="am-u-sm-2 price">￥8.9</li>
                    <li  class="am-u-sm-1 am-u-end">删除</li>
                </ul>
    
                <!--<ul class="am-g list">-->
                    <!--<li  class="am-u-sm-2">-->
                        <!--<span class="img"><img src="./img/newbook/newbook01.jpg"></span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2">所有人问所有人</li>-->
                    <!--<li  class="am-u-sm-2 price">￥38</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-2 num">1</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-1 am-u-end">删除</li>-->
                <!--</ul>-->

                <!--<ul class="am-g list">-->
                    <!--<li  class="am-u-sm-2">-->
                        <!--<span class="img"><img src="./img/newbook/newbook01.jpg"></span>-->
                    <!--</li>-->
                    <!--<li  class="am-u-sm-2">舞姬</li>-->
                    <!--<li  class="am-u-sm-2 price">￥25</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-2 num">1</li>-->
                    <!--<li  class="am-u-sm-2 price">￥8</li>-->
                    <!--<li  class="am-u-sm-1 am-u-end">删除</li>-->
                <!--</ul>-->

                <ul class="am-g end car-end">
                    <li  class="am-u-sm-3 price am-u-sm-offset-7">
                        <p>合计<span class="price" id="totalPrice">￥24.9</span></p>
                        <p>已优惠：<span>￥57.9</span></p>
                    </li>
                    <li  class="am-u-sm-2 am-u-end">
                        <!-- 禁用状态 -->
                        <!-- <div class="acount">去支付</div> -->
                        <!-- 启用状态 -->
                        <div class="acount car-active" onclick="pay()">去支付</div>

                    </li>
                </ul>
                <!-- shoppinglist-end -->  
            </div>
            <!-- step-three-end -->
        </div>
        <!-- shoppingcontent-end -->

        <!-- 支付信息 -->
        <div class="am-modal am-modal-alert" tabindex="-1" id="scavengingPayment">
            <div class="am-modal-dialog">
                <div class="am-modal-hd scavenging-tip">支付宝扫码支付</div>
                <div class="am-modal-bd">
                    <img src="./img/scaveng-dome.png" alt="">
                </div>
                <div class="am-modal-footer">
                <span class="am-modal-btn">关闭</span>
                </div>
            </div>
        </div>

        <!--使用art-template从后台取数据放入-->
     <script id="testdiv" type="text/x-template">
         {{each list}}
        <!-- <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>-->
         <ul class="am-g list" id="ul{{$value.id}}">
             <li  class="am-u-sm-2">
                 <span><input name="books" type="checkbox" id="{{$value.id}}" onclick="selectBook('{{$value.id}}')"></span>
                 <span class="img"><img  src='http://192.168.4.8:8080/{{$value.imgurl}}'></span>
             </li>
             <li  class="am-u-sm-2">{{$value.bookname}}</li>
             <li  class="am-u-sm-2 price">{{$value.price}}</li>
             <li class="am-u-sm-2 price" id="singlePrice{{$value.id}}">{{$value.price}}</li>
             <li  class="am-u-sm-2 num">
                 <button type="button" onclick="minus('{{$value.id}}')">-</button>
                <!--<input type="button" onclick="minus('{{$value.id}}')">-</input>-->
                    <input type="text" style="width: 30px;" id="num{{$value.id}}" value="{{$value.numberInCar}}"/>
                 <button type="button" onclick="plus('{{$value.id}}')">+</button>
                 <!--<input type="button" onclick="plus('{{$value.id}}')">+</input>-->
                <!--<input style="width:50px;" type="number" id="num{{$value.id}}" >-->
             </li>
             <!--刚开始怎么*不识别?-->
             <li  class="am-u-sm-2 price" id="totalPrice{{$value.id}}">{{$value.price*$value.numberInCar}}</li>
             <button type="button" class="am-u-sm-1 am-u-end" onclick="removeBook('{{$value.id}}')">删除</button>
         </ul>
         {{/each}}
     </script>
    <script id="addressTemplate" type="text/x-template">
        {{each list}}
        <!-- <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>-->
        <li>
            <input type="radio" name="address" value="{{$value.id}}">
            <span class="address" id="addressInOrder">{{$value.fullAddress}}</span>
            <span class="name" id="usernameInOrder">({{$value.username}} 收)</span>
            <span class="phone" id="phoneInOrder">{{$value.phone}}</span>
        </li>
        {{/each}}
    </script>
    <script id="checkOrderTemplate" type="text/x-template">
        {{each list}}
        <ul class="am-g list checkOrderTemplate" bookId="{{$value.id}}" id="ul2{{$value.id}}" bookNum="{{$value.numberInCar}}">
            <li  class="am-u-sm-2">
                <span class="img"><img src='http://192.168.4.8:8080/{{$value.imgurl}}'></span>
            </li>
            <li  class="am-u-sm-2">{{$value.bookname}}</li>
            <li  class="am-u-sm-2 price">{{$value.price}}</li>
            <li  class="am-u-sm-2 price">{{$value.price}}</li>
            <li  class="am-u-sm-2 num">{{$value.numberInCar}}</li>
            <li  class="am-u-sm-2 price subtotal" >{{$value.price*$value.numberInCar}}</li>
            <button type="button" class="am-u-sm-1 am-u-end" onclick="removeOrderBook('{{$value.id}}')">删除</button>
        </ul>
        {{/each}}
    </script>
    </body>
</html>